import React, { useState } from "react";
import "./index.css";
import { RegisterComponent } from "./register";
import { LoginComponent } from "./login";
import { ForgotComponent } from "./forgot";
const Login = () => {
  const [isLogin, setIsLogin] = useState(true); // 当前是否为登录模块
  const [isForgotPassword, setIsForgotPassword] = useState(false); // 是否为忘记密码模块
  const [isRegister, setIsRegister] = useState(false); // 是否为注册模块

  // 切换到忘记密码模块
  const handleForgotPassword = () => {
    setIsLogin(false);
    setIsForgotPassword(true);
    setIsRegister(false);
  };

  // 切换到快速注册模块
  const handleRegister = () => {
    setIsLogin(false);
    setIsForgotPassword(false);
    setIsRegister(true);
  };

  // 切换到登录模块
  const handleLogin = () => {
    setIsLogin(true);
    setIsForgotPassword(false);
    setIsRegister(false);
  };

  return (
    <>
      {isLogin ? (
        <LoginComponent
          handleRegister={handleRegister}
          handleForgotPassword={handleForgotPassword}
        />
      ) : isRegister ? (
        <RegisterComponent
          handleLogin={handleLogin}
          handleForgotPassword={handleForgotPassword}
        />
      ) : isForgotPassword ? (
        <ForgotComponent
          handleLogin={handleLogin}
          handleRegister={handleRegister}
        />
      ) : (
        <></>
      )}
    </>
  );
};

export default Login;
